<template>
	<view>
		<navbar :config="config" backColor="#000000"></navbar>
		<view class="box">
			<u-form :model="form" ref="uForm" label-width="156">
				<u-form-item>
					<u-input v-model="form.realName" placeholder-style="color:#999999" placeholder="请输入您的真实姓名" />
				</u-form-item>
				<u-form-item>
					<u-input v-model="form.identityNumber" placeholder="请输入您的身份证号" placeholder-style="color:#999999" />
				</u-form-item>
				<u-form-item>
					<u-input v-model="form.captcha" placeholder="请输入验证码" placeholder-style="color:#999999"
						style="width: 484rpx;" />
					<!-- <template v-slot:right> -->
					<view class="get-code" @click.stop="getCode()">{{ captchaText }}</view>
					<!-- </template> -->
				</u-form-item>
			</u-form>
			<view class="codeView">验证码将发送至本账号的手机号</view>
			<view class="agreement">
				<view class="agreement-box" @click.stop="readAgreement()">
					<!-- <text :class="['agreement-select' , readStatus ? 'read-agreement' : '']"></text> -->
					<view class="whole">
						<view class="top" v-if="readStatus">
							<icon type="success" color="#FF0000" size="17"></icon>
						</view>
						<view class="top" v-else
							style="width: 30rpx;height: 30rpx;border-radius: 50%;border: #ccc solid 1rpx;"></view>
					</view>
					<text class="agreement-text">我已阅读并同意</text>
					<text class="agreement-info" @click.stop="openAgreement()">《会员注册协议》</text>
				</view>
				<view class="submit-btn" @click.stop="setRealNameAuth()">
					确认提交
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		realNameAuth,
		getVerifyCodeByParam
	} from "@/api/personal-center.js"
	export default {
		data() {
			return {
				config: {


					back: true, //false是tolbar页面 是则不写
					title: '实名认证',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000"



				},
				mobile: '',
				readStatus: false, // 协议阅读状态
				form: {
					realName: '',
					identityNumber: '',
					captcha: ''
				},
				captchaText: '获取验证码',
				captchaInterval: null,
				realNameAuthLoading: false
			}
		},
		created() {
			// this.getCode()
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 查看协议
			openAgreement() {
				uni.navigateTo({
					url: '/pages/protocol/index?code=privacy-agreement'
				})
			},
			readAgreement() {
				this.readStatus = !this.readStatus
				console.log('this.readStatus = ', this.readStatus)
			},
			//获取个人信息
			getUserInfo() {
				let personal = uni.getStorageSync('personal')
				this.mobile = personal ? personal.mobile : '';
			},
			getCode() {
				this.getUserInfo()
				if (!this.mobile) {
					uni.showToast({
						title: '当前账号暂未绑定手机号',
						icon: 'none'
					});
					return false
				}
				if (this.captchaText !== '获取验证码') {
					return false
				}
				this.captchaText = '获取中...'
				try {
					clearInterval(this.captchaInterval)
				} catch {}

				try {
					this.$http.post(getVerifyCodeByParam, {
						mobile: this.mobile,
						verifyCodeType: 1
					}).then(res => {
						let num = 60
						this.captchaInterval = setInterval(() => {
							this.captchaText = `${num}s`;
							num--;
							if (num < 0) {
								clearInterval(this.captchaInterval)
								this.captchaText = '获取验证码'
							}
						}, 1000)
					}).catch(err => {
						this.captchaText = '获取验证码'
					})
				} catch (err) {
					this.captchaText = '获取验证码'
				}
			},
			// 实名认证
			setRealNameAuth() {

				if (this.realNameAuthLoading) {
					return false;
				}
				if (!this.readStatus) {
					uni.showToast({
						title: '请先阅读协议',
						icon: 'none'
					});
					return false;
				}
				this.realNameAuthLoading = true;
				try {
					if (!this.form.realName) {
						uni.showToast({
							title: '请填写真实姓名',
							icon: 'none'
						});
						throw new Error()
					}
					if (!this.form.identityNumber) {
						this.$mUtil.toast("请填写身份证号")
						throw new Error()
					}
					if (!(this.form.identityNumber.match(this.$mConfig.telIdentity))) {
						this.$mUtil.toast("请输入正确的身份证号")
						return false
					}
					if (!this.form.captcha) {
						uni.showToast({
							title: '请填写验证码',
							icon: 'none'
						});
						throw new Error()
					};
					this.$http.post(realNameAuth, this.form).then(res => {
						console.log('realNameAuth = res', res)
						uni.showToast({
							title: '绑定成功',
							icon: 'none'
						});
						this.realNameAuthLoading = false;
						uni.navigateBack()
					}).catch(err => {
						this.realNameAuthLoading = false;
					})
				} catch (err) {
					this.realNameAuthLoading = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F9F9F9;
	}

	.box {}

	.get-code {
		// width: 200rpx;
		// text-align: center;
		// height: 60rpx;
		// // background: #e7eefc;
		// border: 1rpx solid #FF721B;
		// line-height: 60rpx;
		// border-radius: 50rpx;
		// font-size: 28rpx;
		// font-family: PingFang SC, PingFang SC-Regular;
		// font-weight: 400;
		// color: #FF721B;
		width: 154rpx;
		height: 65rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #FF211F;
		font-weight: 400;
		font-size: 23rpx;
		color: #FF211F;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

	}

	.agreement {
		position: fixed;
		bottom: 31rpx;
		width: 673rpx;
		left:38rpx;
		.agreement-box {
			width: 100%;
			display: flex;
			// justify-content: center;
			align-items: center;
			margin: 40rpx 0 22rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #AAAAAA;


			.whole {
				display: flex;
				align-items: center;
				margin-right: 20rpx;
			}

			/deep/ .uni-icon-success {
				color: #FF721B !important;
			}

			// .agreement-select {
			// 	width: 25rpx;
			// 	height: 25rpx;
			// 	background: #ffffff;
			// 	border: 1rpx solid #0043fb;
			// 	border-radius: 6rpx;
			// 	margin-right: 8rpx;
			// }

			// .read-agreement {
			// 	position: relative;

			// 	&:before {
			// 		content: '';
			// 		position: absolute;
			// 		left: 50%;
			// 		top: 50%;
			// 		transform: translate(-50%, -50%);
			// 		width: 15rpx;
			// 		height: 15rpx;
			// 		background-color: #0043fb;
			// 	}
			// }

		
		}
	}

	.submit-btn {
		text-align: center;
		margin: 0 auto;
		width: 673rpx;
		height: 96rpx;
		background: #FF211F;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		font-weight: 400;
		font-size: 29rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
	}

	/deep/ .u-form-item {
		color: #474747;
		width: 673rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-top: 19rpx;
		margin-left: 38rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 19rpx;
	}

	.top {
		display: flex;
		align-items: center;
	}

	.codeView {
		font-weight: 400;
		font-size: 23rpx;
		color: rgba(153, 153, 153, 0.8);
		margin-top: 19rpx;
		margin-left: 38rpx;
	}
	.agreement-text{
		font-weight: 400;
		font-size: 27rpx;
		color: #999999;
	}
	.agreement-info{
		color:#FF211F;
		font-weight: 400;
		font-size: 27rpx;
	}
</style>